<script setup>

import {onBeforeUnmount, ref} from "vue";
import {useStore} from "@/stores/userStore";
import router from "@/router";
import {ChatRound, Reading, View, Search} from "@element-plus/icons-vue";
import {get} from "@/net";

const store = useStore()
const state = ref(false)
const time = ref(0)

state.value = store.auth.user != null;

function padZero(number) {
    return number < 10 ? '0' + number : number;
}

function getTime() {
    const date = new Date();

    // 年、月、日
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    // 时、分、秒
    let hour = date.getHours();
    if (hour >= 6 && hour < 11) {
        time.value = 0
    } else if (hour >= 11 && hour <= 13) {
        time.value = 1
    } else if (hour > 13 && hour < 18) {
        time.value = 2
    } else {
        time.value = 3
    }
    hour = padZero(hour)
    let minute = padZero(date.getMinutes())
    let second = padZero(date.getSeconds());

    // 实时显示
    const element = document.getElementById('time');
    element.innerHTML = year + '-' + month + '-' + day + ' ' + hour +
            ':' + minute + ':' + second;
}

const tableData = ref([])
const searchData = ref([])
const typeValue = ref(null)
const types = ref([])
const viewCount = ref(0)
const articleCount = ref(0)
const commentCount = ref(0)

const getData = () => {
    get('api/article/audit?audit=1',
            (data) => {
                tableData.value = data
                tableData.value.forEach((item, i) => {
                    getTypename(i, item.tid)
                    getAuthor(i, item.uid)
                })
                getTypes()
                initData(tableData)
            })
    get('api/article/uid?uid=' + store.auth.user.uid,
            (data) => {
                articleCount.value = data.length
                data.forEach((item) => {
                    viewCount.value += item.views
                })
                getCommentCount()
            })
}

const getTypes = () => {
    get('api/type/all', (data) => {
        types.value = data
    })
}

const getTypename = (i, tid) => {
    get('api/type/tid?tid=' + tid, (data) => {
        tableData.value[i].type = data.type
    })
}

const getAuthor = (i, uid) => {
    get('api/user/uid?uid=' + uid, (data) => {
        tableData.value[i].author = data.username
    })
}

const getCommentCount = () => {
    get('api/comment/count-uid?uid=' + store.auth.user.uid,
            (data) => {
                commentCount.value = data
            })
}

const search = () => {
    if (typeValue.value !== null) {
        searchData.value = tableData.value.filter(item => {
            return item.tid === typeValue.value
        })
        initData(searchData)
    } else {
        initData(tableData)
    }

}

const pageSize = 6 // 每页显示的数据数量
const currentPage = ref(1) // 当前页码
const total = ref(0) // 总数据条数
const pagedData = ref([]) // 当前页的数据

// 初始化数据
const initData = (data) => {
    total.value = data.value.length
    updatePageData(data)
}

// 更新当前页的数据
const updatePageData = (data) => {
    const start = (currentPage.value - 1) * pageSize
    const end = start + pageSize
    pagedData.value = data.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange = (newPage) => {
    currentPage.value = newPage
    if (typeValue.value === null) {
        updatePageData(tableData)
    } else {
        updatePageData(searchData)
    }
}

getData()
setInterval(getTime, 1000);

onBeforeUnmount(() => {
    clearInterval(getTime)
})

</script>

<template>
    <div class="content">
        <div class="content-left">
            <div class="content-top">
                <div class="content-top-left">
                    <span>
                        文章类型
                    </span>
                    <el-select
                            v-model="typeValue"
                            filterable
                            clearable
                            :empty-values="[null, undefined]"
                            :value-on-clear="null"
                            :teleported="false"
                            placeholder="请选择或输入文章类型"
                            style="width: 200px;"
                    >
                        <el-option
                                v-for="item in types"
                                :key="item.tid"
                                :label="item.type"
                                :value="item.tid"
                        />
                    </el-select>
                    <el-button style="height: 32px;width: 100px;" color="#c1c1c1" :icon="Search" @click="search">
                        搜索
                    </el-button>
                </div>
            </div>
            <div class="content-bottom">
                <div  v-for="item in pagedData" class="content-list" @click="router.push({path: '/article', query: {aid: item.aid}})">
                    <p class="content-title" v-html="item.title"></p>
                    <p class="content-omit" v-html="item.content"></p>
                    <div class="content-info">
                        <span>作者：{{ item.author }}</span>
                        <span>发布时间：{{ item.publish_time }}</span>
                        <span>文章类别：{{ item.type }}</span>
                    </div>
                </div>
                <div>
                    <el-pagination
                            style="margin: 20px 140px"
                            layout="total, prev, pager, next, jumper"
                            background
                            :page-size="pageSize"
                            :current-page="currentPage"
                            :total="total"
                            @current-change="handlePageChange"
                    />
                </div>
            </div>
        </div>
        <div class="content-right">
            <el-avatar
                    :size="120"
                    style="margin:60px auto"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <div>
                <p v-if="!state" style="margin: auto; font-weight: 1000">
                    您好游客，请<a @click="router.push('/welcome')">登录</a>
                </p>
                <p v-if="state && time === 0" style="margin: auto; font-weight: 1000">
                    上午好，{{ store.auth.user.username }}
                </p>
                <p v-if="state && time === 1" style="margin: auto; font-weight: 1000">
                    中午好，{{ store.auth.user.username }}
                </p>
                <p v-if="state && time === 2" style="margin: auto; font-weight: 1000">
                    下午好，{{ store.auth.user.username }}
                </p>
                <p v-if="state && time === 3" style="margin: auto; font-weight: 1000">
                    晚上好，{{ store.auth.user.username }}
                </p>
            </div>
            <div id="time"></div>
            <div v-if="!state" style="margin-top: 60px">
                更多信息登录后获取...
            </div>
            <div v-if="state" class="content-right-static">
                <div style="width: 180px;display: flex; flex-direction: row;gap: 40px;margin: 20px auto 10px">
                    <div style="width: 59px;display: flex; flex-direction: column;gap: 10px">
                        <el-icon :size="25" style="transform: translateX(4px)">
                            <Reading/>
                        </el-icon>
                        <span>{{ articleCount }}</span>
                        <span>文章</span>
                    </div>
                    <div style="width: 59px;display: flex; flex-direction: column;gap: 10px">
                        <el-icon :size="25" style="transform: translateX(4px)">
                            <ChatRound/>
                        </el-icon>
                        <span>{{ commentCount }}</span>
                        <span>评论</span>
                    </div>
                    <div style="width: 59px;display: flex; flex-direction: column;gap: 10px">
                        <el-icon :size="25" style="transform: translateX(4px)">
                            <View/>
                        </el-icon>
                        <span>{{ viewCount }}</span>
                        <span>浏览</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 1014px;
    display: flex;
    flex-direction: row;
    margin: 20px auto;
    gap: 14px;
}

.content-left {
    width: 700px;
    height: 700px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.content-top {
    width: 700px;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-top-left {
    margin: 13px 20px;
    display: flex;
    flex-direction: row;
    border: #23211c 1px solid;
    width: 400px;
}

.content-top-left span {
    display: flex;
    font-size: 17px;
    width: 100px;
    text-align: center;
    background-color: #c1c1c1;
    height: 32px;
    align-items: center;
    justify-content: center
}

.content-bottom {
    width: 700px;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-list {
    padding: 10px 0;
    width: 100%;
    border-bottom: #c1c1c1 1px solid;
}

.content-list:hover {
    cursor: pointer;
    background-color: rgba(236, 233, 233, 0.7);
}

.content-title {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 500;
}

.content-title:hover {
    text-decoration: black underline;
}

.content-omit {
    margin-left: 20px;
    font-size: 15px;
    width: 600px;
    text-align: justify;
    color: #555666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.content-info {
    margin-left: 20px;
    font-size: 15px;
    width: 600px;
    text-align: justify;
    color: #555666;
}

.content-info span {
    margin-right: 50px;
}

.content-right {
    width: 300px;
    height: 700px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-right p a:hover {
    cursor: pointer;
    color: #6dd766;
    text-decoration: #6dd766 underline;
}

#time {
    margin-top: 20px;
    height: 30px;
}

.content-right-static {
    margin: 30px;
}

:deep(.el-select__wrapper) {
    padding: 0 2px;
    box-shadow: none;
}

</style>